<template>
  <div class="rizhi clearfix">
    <div class="quyu clearfix">
      <div class="top">
        <span>数据列表</span>
      </div>
      <!-- 数据 -->
      <!-- form -->
      <div class="conten clearfix">
        <el-table
          :data="tableData"
          :header-cell-style="{
            'height':'56px',
            'background':'#F2F2F2',
          }"
          style="width: 100%"
        >
          <!-- 标题设置 -->

          <el-table-column
            label="时间"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 日期 -->
              <span style="display:block;text-align:center;">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <!-- 标题2 -->

          <el-table-column
            label="IP"
            align="center"
          >
            <template slot-scope="scope">
              <!-- <el-popover
                trigger="hover"
                placement="top"
              > -->
              <!-- <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p> -->
              <!-- 名字 -->
              <div
                slot="reference"
                class="name-wrapper"
              >
                <span style="display:block;text-align:center;">{{ scope.row.ip }}</span>
              </div>
              <!-- </el-popover> -->
            </template>
          </el-table-column>
          <!-- 标题3 -->
          <el-table-column
            label="地区"
            align="center"
          >
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.localtion }}</span>
            </template>
          </el-table-column>
          <!-- 标题4 -->
          <el-table-column
            label="登录时间"
            align="center"
          >
            <template slot-scope="scope">
              <span style="display:block;text-align:center;">{{ scope.row.loginTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--分页内容-->
    <pagination :pagination="pagination1" @changepage="init" />
  </div>
</template>
<script>
import { getLog } from '@/api/usermanage.js'
import { formatDateAndTime } from '@/utils/util.js'
export default {
  data() {
    return {
      tableData: [],
      pagination1: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化
    init(pageNum = 1) {
      getLog({
        pageNum,
        pageSize: 10,
        userCode: this.$route.query.code
      })
        .then(res => {
          for (let i = 0; i < res.data.list.length; i++) {
            res.data.list[i].createTime = formatDateAndTime(
              res.data.list[i].createTime
            )
            res.data.list[i].loginTime = formatDateAndTime(
              res.data.list[i].loginTime
            )
          }
          this.tableData = res.data.list
          this.tableData.forEach((item, index) => {
            if(item.ip == null) {
              item.ip = '未获取'
            }
            if(item.localtion == null) {
              item.localtion = '未获取'
            }
          })
          this.pagination1 = res.data
        })
        .catch(res => {
          console.log(res)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.rizhi {
  margin: 0;
  margin-left: 29px;
  padding: 0;
  .dashboard-text {
    margin-top: 17px;
    width: 1549px;
    height: 37px;
    margin-bottom: 16px;
    .lef {
      float: left;
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      i {
        float: left;
        margin-top: 8.5px;
        width: 11px;
        height: 20px;
        background: rgba(72, 141, 255, 1);
        border-radius: 4px;
        margin-right: 12px;
      }
    }
    .rig {
      font-size: 14px;
      width: 76px;
      height: 37px;
      text-align: center;
      line-height: 37px;
      background: #488dff;
      border-radius: 4px;
      line-height: 37px;
      float: right;
    }
  }
  // box
  .quyu {
    width: 1549px;
    padding: 11px 24px 49px 17px;
    border: 1px solid #f2f2f2;
    box-shadow: #ccc 0px 0px 3px 1px;
    .top {
      // width: 1509px;
      height: 50px;
      margin-bottom: 9px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      span {
        display: block;
        height: 54px;
        line-height: 54px;
        font-size: 14px;
        color: #333;
        width: 83px;
        height: 16px;
        font-size: 16px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }
    }
    .hea {
      height: 71px;
      padding: 13px 0 18px 0;
      .btn_a {
        float: left;
        width: 100px;
        height: 40px;
        margin-right: 31px;
        background: rgba(72, 141, 255, 1);
        border-radius: 2px;
      }
      .btn_b {
        float: left;
        width: 100px;
        height: 40px;
        background: rgba(72, 141, 255, 1);
        border-radius: 2px;
      }
    }
    // set
    .conten {
      // width: 1509px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .el-table-column {
        text-align: center !important;
      }
      .cell {
        height: 88px !important;
        line-height: 88px !important;
        .recover {
          display: block;
          width: 100%;
          height: 44px;
          line-height: 44px;
          text-align: center;
          font-size: 16px;
          color: #333;
        }
        .delect {
          display: block;
          width: 100%;
          height: 44px;
          line-height: 44px;
          text-align: center;
          font-size: 16px;
          color: #f13232;
        }
      }
      .is-leaf {
        text-align: center !important;
      }
      .el-table__row {
        height: 88px !important;
        line-height: 88px !important;
      }
      .is-center {
        height: 88px !important;
        line-height: 88px !important;
      }
      // 区域
      .el-table td,
      .el-table th {
        padding: 0 !important;
        min-width: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
      }
    }
  }
  // 分页
  // .el-pagination {
  //   width: 955px;
  //   height: 40px;
  //   position: fixed;
  //   right: 76px;
  //   bottom: 97px;
  // }
  // 分页
  // .pages {
  //   width: 1549px !important;
  //   .pagination-block {
  //     margin: 30px 0 0 0 !important;
  //   }
  // }
}
</style>
